<!DOCTYPE html>
<html lang=''>

<head>
    <meta charset='UTF-8'>
    <meta http-equiv='X-UA-Compatible' content='IE=edge'>
    <meta name='viewport' content='width=device-width, initial-scale=1.0'>
    <title>Document</title>
    <script src='./vue.js'></script>
    <style>
        .cart {
            width: 100%;
            height: 180px;
            border: 1px solid red;
            display: flex;
        }

        img {
            width: 100px;
            height: 100px;
        }
    </style>
</head>

<body>
    <div id='app'>

        <cart v-for="(item,index) in news" :key="item.message" :item="item"></cart>

    </div>
</body>
<template id="cart">
    <div class="cart">
        <img :src="item.src" alt="">
        <h1>{{item.title}}</h1>
        <p>{{item.message}}</p>
    </div>
</template>
<script>
    const app = Vue.createApp({
        data () {
            return {
                news: [
                    { title: '北京禁止这类活动', src: 'https://img14.360buyimg.com/mobilecms/s360x360_jfs/t1/215990/1/23281/131864/63f51c11Ffb388d4e/709a28ef6b74fc90.jpg!q70.dpg.webp', message: '提醒！3月1日至14日，北京禁止这类活动' },
                    { title: '北京银保监局', src: 'https://img14.360buyimg.com/mobilecms/s360x360_jfs/t1/175198/34/33404/133364/63f81a64F689386c6/271cdbd87a9e6e7c.jpg!q70.dpg.webp', message: '北京银保监局：个人养老金账户开立约190万户' }
                ]
            }
        },
    })

    app.component('cart', {
        template: '#cart',
        props: ['item']
    })

    app.mount('#app')
</script>

</html>